<template>
  <el-button @click="handle">预览</el-button>
  <div id="DataDrilling_PenetrateEcho2" style="width: 1900px; height: 1080px"></div>
  <el-dialog title="穿透到报表"  v-model="dialogVisible" width="100%" height="100%" :visible.sync="dialogVisible"  @open="handleDialogOpen" >

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
//挂载时候，构建bi展现器实例
import {onMounted,ref} from 'vue';
import {useRoute,useRouter} from 'vue-router'
const route = useRoute();
const router = useRouter();

import {$bus} from "@/bus/index.js"
const iframeUrl=ref('http://localhost:5173/#/xzChartDesigner_2');
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js"
const dialogVisible=ref(false);
let dialogW=ref("100%");
let dialogH=ref("768px");
let _onUpdateData=[]
let _onUpdateDatasetList=[]
const _penetrateDialog =(obj)=>{

  console.log("content:",obj.content);
  console.log("values:",obj.values)
  dialogVisible.value=true;
}
const handleDialogOpen=()=>{
  // router.push('/xzreportInAction/action_3_2');
  alert('hello')
}
const handle = () => {
  $bus.emit("PenetrateMain_preview", eventBusPreview);
}


let option = {};
let reportInstance = null;
const eventBusPreview=(config,dataConfig,_onUpdateDatasetList_main,_onUpdateData_main)=>{
  option.reportConfig = config;
  option.reportData = [];
  option.paramsConfig = [];
  _onUpdateData=_onUpdateData_main;
  _onUpdateDatasetList=_onUpdateDatasetList_main;

  document.getElementById("DataDrilling_PenetrateEcho2").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。
  reportInstance = new XZDashboard("#DataDrilling_PenetrateEcho2", option);
  reportInstance.on('_penetrate', _penetrateDialog)
  reportInstance.updateData(dataConfig);//这里传入的就是  chartDesigner模板需要的数据集名称，json数据集自带数据，外部数据不需要记录
  reportInstance.initView();
}

//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  return new Promise((resolve, reject) => {
    resolve(_onUpdateDatasetList);
  })
}

option.onUpdateDatasetList = onUpdateDatasetList
// 废弃

let onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    try {
      resolve(queryonUpdateDataFrom(datasets, params, _onUpdateData));
    } catch (error) {
      console.log(error);
    }
  })
}
option.onUpdateData = onUpdateData;

//导入BI报表对应的完整的数据集,既然是回显，应该是空画布。
onMounted(() => {
  option.reportConfig = [];
  option.reportData = [];
  option.paramsConfig = [];
});
</script>


<style scoped>

</style>
